<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '@/stores/counter';
import type { ArticleItem, ArticleResData } from '@/types/data';
import axios from 'axios';
import { ref, watch } from 'vue';



const stores = useUserStore()

const articles = ref<ArticleItem[]>([])

watch(() => stores.channel_id,async() => {
  const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles',
    {
      params:{
        channel_id:stores.channel_id,
        timestamp:Date.now()
      }
    }
  )
  articles.value = res.data.data.results

},{immediate:true})

</script>

<template>
  <div class="article-list">
    <div class="article-item" @click="router.push({name:'ArticleDetail',params:{id:v.art_id}})" v-for="v,i in articles" :key="v.art_id+v.aut_name">
      <p class="title">{{v.aut_name}}</p>
      <img v-for="p in v.cover.images" class="img" :src="p" alt="">
      <div class="info">
        <span>{{v.aut_name}}</span>
        <span>{{v.comm_count}}评论</span>
        <span>{{v.pubdate}}</span>
      </div>
    </div>
  </div>
</template>